<template>
	<div class="w100 h100 flex-col p-t-26 p-l-10 p-r-10">
		<div class="flex-col">
			<div class="btn_box flex">
				<div id="btn1" class="btn p-10 pointer" :class="{ checked: active == 1 }" @click="active = 1">异常告警</div>
				<div id="btn2" class="btn p-10 m-l-15 pointer" :class="{ checked: active == 2 }" @click="active = 2">实时数据查询</div>
			</div>
		</div>
		<Transition name="fade-transform" mode="out-in" appear>
			<div class="f1 h0 p-t-10" v-if="active == 1">
				<my-box class="h100" title="安全监测">
					<template #right>
						<div class="flex m-between">
							<!-- <div class="btn_box flex">
                                <div id="btn1" class="btn p-10 pointer" :class="{ checked: active == 1 }">全量导出</div>
                            </div> -->
							<div class="flex">
								<div class="flex-center m-l-10">
									<label class="tc m-r-5" for="type" style="color: #4d88fe; width: 80px; font-size: 14px">测点类型</label>
									<my-select :list="testPointType" clearable :teleported="false" v-model="form.type" placeholder="请选择测点类型" />
								</div>
								<div class="flex-center m-l-10">
									<my-date-pick
										type="daterange"
										v-model="form.date"
										range-separator="至"
										start-placeholder="开始时间"
										end-placeholder="结束时间"
										:teleported="false"
										:autoshortcuts="false"
									/>
								</div>
								<div class="flex-center pointer m-l-10">
									<my-input v-model="form.search" :clearable="false" placeholder="搜索...">
										<template #suffix>
											<el-icon @click="refTable.reload()"><Search /></el-icon>
										</template>
									</my-input>
								</div>
							</div>
						</div>
					</template>
					<MyListPanel ref="refTable" :total="state.total" :loadFn="openAlarmInfoFn">
						<template #default="{ page, size }">
							<my-table :data="state.list" :columns="columns">
								<template #index="{ $index }">
									<span style="color: #fff"> {{ $index + 1 + (page - 1) * size }}</span>
								</template>
							</my-table>
						</template>
					</MyListPanel>
				</my-box>
			</div>
			<div class="flex-col f1 h0 p-t-10 p-b-10" v-else>
				<div class="btn_box flex nav">
					<div id="btn3" class="btn3 pointer" :class="{ choose: active1 == 3 }" @click="active1 = 3">地表水位和降雨量</div>
					<div id="btn4" class="btn3 m-l-15 pointer" :class="{ choose: active1 == 4 }" @click="active1 = 4">井下流量</div>
				</div>
				<div class="flex-col f1 h0">
					<div class="eCharts h0" style="flex-grow: 3">
						<Transition name="fade-top-transform" mode="out-in">
							<my-echarts class="h100" :options="active1 == 3 ? options : options1" :key="active1" />
						</Transition>
					</div>
					<div class="table m-t-10 h0" style="flex-grow: 7; flex-shrink: 0">
						<my-box class="h100" title="安全监测">
							<template #right>
								<div class="flex m-between">
									<!-- <div class="btn_box flex" @click="changeTab">
                                        <div id="btn1" class="btn p-10 pointer" :class="{ checked: active == 1 }">全量导出</div>
                                    </div> -->
									<div class="flex">
										<div class="flex-center m-l-10">
											<label class="tc m-r-5" for="system" style="color: #4d88fe; width: 60px; font-size: 14px">子系统</label>
											<my-select :list="systemList" clearable :teleported="false" v-model="form.system" placeholder="请选择子系统"></my-select>
										</div>
										<div class="flex-center m-l-10">
											<label class="tc m-r-5" for="type" style="color: #4d88fe; width: 80px; font-size: 14px">测点类型</label>
											<my-select :list="systemList" clearable :teleported="false" v-model="form.type" placeholder="请选择测点类型" />
										</div>
										<div class="flex-center m-l-10">
											<my-date-pick
												type="daterange"
												v-model="form.date"
												range-separator="至"
												start-placeholder="开始时间"
												end-placeholder="结束时间"
												:teleported="false"
												:autoshortcuts="false"
											/>
										</div>
										<div class="flex-center pointer m-l-10">
											<my-input v-model="form.search" :clearable="false" placeholder="搜索...">
												<template #suffix>
													<el-icon @click="refTable1.reload()"><Search /></el-icon>
												</template>
											</my-input>
										</div>
									</div>
								</div>
							</template>

							<MyListPanel ref="refTable1" :total="state1.total" :loadFn="realTimeDataOfSafetyFn">
								<template #default="{ page, size }">
									<my-table :data="state1.list" :columns="columns1">
										<template #index="{ $index }">
											<span style="color: #fff"> {{ $index + 1 + (page - 1) * size }}</span>
										</template>
									</my-table>
								</template>
							</MyListPanel>
						</my-box>
					</div>
				</div>
			</div>
		</Transition>
	</div>
</template>

<script setup name="/monitoring/hydrologic">
import { openAlarmInfo, realTimeDataOfSafety, waterLevel, wellFlow } from '@a/hydrologic.js'

const subsystemId = 2
// 测点类型
const testPointType = [
	{
		dictLabel: '风速',
		dictValue: 1
	},
	{
		dictLabel: '甲烷',
		dictValue: 2
	},
	{
		dictLabel: '温度',
		dictValue: 3
	},
	{
		dictLabel: '一氧化碳',
		dictValue: 4
	},
	{
		dictLabel: '二氧化碳',
		dictValue: 5
	},
	{
		dictLabel: '粉尘浓度',
		dictValue: 6
	},
	{
		dictLabel: '氧气',
		dictValue: 7
	},
	{
		dictLabel: '烟雾传感器',
		dictValue: 8
	}
]

/**
 * 异常告警
 */
let refTable = shallowRef(null),
	active = ref(1),
	form = ref({
		testPointType: '',
		date: [],
		keyWord: ''
	}),
	columns = [
		{
			label: '序号',
			prop: 'index',
			width: 60
		},
		{
			label: '子系统 ',
			prop: 'subsystem',
			width: 100
		},
		{
			label: '测点类型',
			prop: 'testPointType',
			width: 100
		},
		{
			label: '测点编号',
			prop: 'testPointId',
			width: 100
		},
		{
			label: '测点名称',
			prop: '',
			width: 100
		},
		{
			label: '监测值',
			prop: 'monitoringValue',
			width: 100
		},
		{
			label: '单位',
			prop: 'units',
			width: 80
		},
		{
			label: '告警等级',
			prop: 'alarmLevel',
			width: 100
		},
		{
			label: '告警名称',
			prop: 'alarmName',
			width: 100
		},
		{
			label: '告警描述',
			prop: 'alarmDesc'
		},
		{
			label: '告警时间   ',
			prop: 'alarmTime',
			width: 160
		}
	],
	state = reactive({
		list: [],
		total: 0
	})
function openAlarmInfoFn(pageNum, pageSize) {
	let data = addDateRange(form.value, 'date', 'Date')
	openAlarmInfo({ subsystemId, pageNum, pageSize, ...data }).then((res) => {
		state.total = res.data?.total
		state.list = res.data?.rows
	})
}

// 实时数据查询
let refTable1 = shallowRef(null),
	active1 = ref(3),
	form1 = ref({
		testPointType: '',
		date: [],
		keyWord: ''
	}),
	columns1 = [
		{
			label: '序号',
			prop: 'index',
			width: 60
		},
		{
			label: '测点类型',
			prop: 'testPointType'
		},
		{
			label: '监测编号',
			prop: 'testPointId'
		},
		{
			label: '监测位置',
			prop: 'monitoringLocation'
		},
		{
			label: '监测值',
			prop: 'monitoringValue'
		},
		{
			label: '单位',
			prop: 'units'
		},
		{
			label: '传感器状态',
			prop: 'sensorState'
		},
		{
			label: '监测时间',
			prop: 'monitoringTime',
			width: 160
		}
	],
	state1 = reactive({
		list: [],
		total: 0
	})

// 安全监测
function realTimeDataOfSafetyFn(pageNum, pageSize) {
	let data = addDateRange(form1.value, 'date', 'Date')
	realTimeDataOfSafety({ subsystemId, pageNum, pageSize, ...data }).then((res) => {
		state1.total = res.data?.total
		state1.list = res.data?.rows
	})
}

// 地表水位和降雨量
let waterLevelData = ref({}),
	options = computed(() => {
		let seriesData = []
		const { waterName = [], date = [], monitoringValue = [] } = waterLevelData.value

		waterName?.forEach((item, i) => {
			seriesData.push({
				name: item,
				data: monitoringValue[i],
				type: 'line',
				yAxisIndex: 0,
				symbol: 'circle',
				symbolSize: 7,
				barWidth: 14,
				splitNumber: 6,
				smooth: false,
				lineStyle: {
					width: 1
				}
			})
		})
		return {
			grid: {
				top: 40,
				left: 10,
				right: 20,
				bottom: 5,
				containLabel: true
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'line'
				},
				backgroundColor: 'rgba(3, 15, 39, 0.8)',
				borderColor: 'rgba(76, 107, 209, 0.5)',
				extraCssText: 'box-shadow: inset 0px 0px 8px 0px rgba(52, 104, 216, 0.6)',
				textStyle: {
					color: 'rgba(255, 255, 255, 1)'
				}
			},
			legend: {
				orient: 'horizontal',
				top: 10,
				right: 20,
				itemWidth: 20,
				itemHeight: 8,
				icon: 'circle',
				itemGap: 17,
				align: 'left',
				textStyle: {
					color: '#fff',
					fontSize: 14,
					fontFamily: 'AlibabaPuHuiTi-Medium'
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: true,
				axisPointer: {
					handle: {
						show: false
					}
				},
				axisLine: {
					show: true,
					symbol: ['none', 'none'],
					symbolSize: [6, 12],
					lineStyle: {
						width: 2,
						color: '#747B88'
					}
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					fontSize: 12,
					color: '#fff',
					interval: 'auto'
				},
				data: date
			},
			yAxis: [
				{
					type: 'value',
					splitLine: {
						show: false
					},
					axisLabel: {
						fontSize: 12,
						color: '#fff',
						interval: 'auto'
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: 'rgba(224,230,241,0.2)',
							type: 'dashed'
						}
					},
					axisTick: {
						show: false
					}
				}
			],
			series: seriesData
		}
	})
function waterLevelFn() {
	waterLevel().then((res) => {
		waterLevelData.value = res.data
	})
}
waterLevelFn()

// 井下流量
let wellFlowData = ref({}),
	options1 = computed(() => {
		let seriesData = []
		const { testPointName, date, monitoringValue } = wellFlowData.value,
			color = ['64,132,238', '105,105,105', '205,92,92', '139,0,0', '255,69,0', '70,130,180', '173,255,47', '46,139,87']

		testPointName.forEach((name, i) => {
			const data = monitoringValue[i],
				colorI = color[i % color.length]
			seriesData.push({
				name,
				type: 'bar',
				barGap: '50%',
				barWidth: 18,
				barMaxWidth: 48,
				label: {
					show: true,
					position: 'top',
					distance: 4.8,
					textStyle: {
						color: '#5cdbe5',
						fontSize: 12
					}
				},
				itemStyle: {
					borderRadius: [20, 20, 0, 0],
					color: {
						x: 0,
						y: 1,
						x2: 0,
						y2: 0,
						type: 'linear',
						global: false,
						colorStops: [
							{
								offset: 0,
								color: `rgba(${colorI},0.2)`
							},
							{
								offset: 1,
								color: `rgba(${colorI},0.8)`
							}
						]
					}
				},
				data
			})
		})
		return {
			tooltip: {
				trigger: 'axis',
				backgroundColor: 'rgba(3, 15, 39, 0.8)',
				borderColor: 'rgba(76, 107, 209, 0.5)',
				extraCssText: 'box-shadow: inset 0px 0px 8px 0px rgba(52, 104, 216, 0.6)',
				textStyle: {
					color: 'rgba(255, 255, 255, 1)'
				}
			},
			legend: {
				orient: 'horizontal',
				top: 10,
				right: 20,
				itemWidth: 20,
				itemHeight: 8,
				icon: 'circle',
				itemGap: 17,
				align: 'left',
				textStyle: {
					color: '#fff',
					fontSize: 14,
					fontFamily: 'AlibabaPuHuiTi-Medium'
				}
			},
			grid: {
				top: 40,
				left: 10,
				right: 20,
				bottom: 5,
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: true, //坐标轴两边留白
				axisLabel: {
					//坐标轴刻度标签的相关设置。
					interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
					//	margin:15,
					textStyle: {
						color: '#1B253A',
						fontStyle: 'normal',
						fontFamily: '微软雅黑',
						fontSize: 12
					}
				},
				axisTick: {
					//坐标轴刻度相关设置。
					show: false
				},
				axisLine: {
					//坐标轴轴线相关设置。数学上的x轴
					show: true,
					lineStyle: {
						width: 2,
						color: '#747B88'
					}
				},
				splitLine: {
					//坐标轴在 grid 区域中的分隔线。
					show: false,
					lineStyle: {
						color: '#055A95'
						// 	opacity:0.1
					}
				},
				axisLabel: {
					interval: 0,
					textStyle: {
						color: '#fff',
						fontSize: 12
					}
				},
				data: date
			},
			yAxis: [
				{
					type: 'value',
					splitNumber: 5,
					axisLabel: {
						interval: 0,
						rotate: 0,
						textStyle: {
							color: '#fff',
							fontStyle: 'normal',
							fontFamily: '微软雅黑',
							fontSize: 14
						}
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: 'rgba(224,230,241,0.2)',
							type: 'dashed'
						}
					}
				}
			],
			series: seriesData
		}
	})
function wellFlowFn() {
	wellFlow().then((res) => {
		wellFlowData.value = res.data
	})
}
wellFlowFn()
</script>

<style lang="scss" scoped>
.btn_box {
	color: #fff;
}
.btn {
	opacity: 1;
	border-radius: 4px;
	background: linear-gradient(180deg, #1c437e 1%, #091f40 100%);
	box-shadow: 0px 2px 2px 0px #091121, inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4);
}
.checked {
	background: linear-gradient(180deg, #2c62b3 1%, #0e3064 100%);
}
.eCharts {
	border: 1px solid rgba(76, 107, 209, 0.5);
}
.nav {
	position: relative;
	z-index: 1;
}

.nav > .btn3 {
	position: relative;
	display: inline-block;
	padding: 10px 20px;
	color: inherit;
	text-decoration: none;
	margin: 0 -0.2em;
}

.nav > .btn3::before {
	border: 0.1em solid #0e3064;
}

.nav .btn3::before {
	content: ''; /* To generate the box */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	border-bottom: none;
	border-radius: 0.5em 0.5em 0 0;
	background: linear-gradient(180deg, #1c437e 1%, #091f40 100%);
	box-shadow: 0px 2px 2px 0px #091121, inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4);
	transform: scale(1.1, 1.3) perspective(0.5em) rotateX(5deg);
	transform-origin: bottom;
}

.nav .btn3.choose {
	z-index: 2;
}

.nav .btn3.choose::before {
	background: linear-gradient(180deg, #2c62b3 1%, #0e3064 100%);
}
</style>
